<template>
	<div class="monitoring-box">
		<navBread3 />

		<section class="search-box" style="height:auto;">
			<div class="m-title">舆情总览</div>
			<!--<div class="slider-box">
				<img src="../../assets/img/searchtiao.png" alt="" />
			</div>-->
			<div class="sjd-box" >
				<div class="title">
					<img src="../../assets/img/sjd.png" alt="" />
					<span style="margin-left: 10px">时间段：</span>
				</div>
				<div class="sjd">
					<span class="sjdwz" :class="{ active: yearIndex == index }" v-for="(item, index) in yearList" :key="index" @click="handleYear(item, index)">
						{{ item }}
					</span>
				</div>
			</div>

			<div class="sjd-box">
				<div class="title">
					<img src="../../assets/img/jjr.png" alt="" />
					<span style="margin-left: 10px">节假日：</span>
				</div>
				<div class="sjd">
					<span
						class="sjdwz"
						:class="{ active: holidayIndex == index }"
						v-for="(item, index) in holidayList"
						:key="index"
						@click="handleHoliday(item, index)"
					>
						{{ item }}
					</span>
				</div>
				<el-button style="float: right" type="primary" @click="">查询</el-button>
			</div>
		</section>
		<!-- 热门景点 -->
		<section class="popular-box">
			<!-- <div class="m-title">投诉统计</div> -->

			<ul class="popular-content">
				<li class="jd-item jd-item4 item999">
					<div class="flow-header">
						<div class="title-box">
							<span class="title">投诉统计</span>
						</div>
						<div class="line"></div>
					</div>
					<div class="jdgs-box">
						<div style="display: flex; justify-content: center; margin-top: 20px">
							<div class="tstj">总数</div>
							<div class="tstj">已处理</div>
							<div class="tstj">待处理</div>
						</div>
						<div style="display: flex; justify-content: center; margin-top: 8px">
							<div class="tstj1" style="color: #fe7264">24</div>
							<div class="tstj1">20</div>
							<div class="tstj1">4</div>
						</div>
					</div>
				</li>

				<li class="jd-item jd-item4 item999">
					<div class="flow-header">
						<div class="title-box">
							<span class="title">舆情风险指数</span>
						</div>
						<div class="line"></div>
					</div>
					<div style="width: 100%; display: flex; align-items: center">
						<div id="chart9" ref="chart9" style="width: 50%; height: 260px"></div>
						<div id="chart10" ref="chart10" style="width: 50%; height: 260px"></div>
					</div>
				</li>

				<li class="jd-item jd-item1 item999">
					<div class="flow-header">
						<div class="title-box">
							<span class="title">文章统计</span>
						</div>
						<div class="line"></div>
					</div>
					<div class="jdgs-box">
						<div class="wztj">
							<div>正面：</div>
							<div class="wztjnum">0</div>
							<div class="wztjnum">8</div>
							<div class="wztjnum">0</div>
						</div>
						<div class="wztj">
							<div>负面：</div>
							<div class="wztjnum1">0</div>
							<div class="wztjnum1">1</div>
							<div class="wztjnum1">0</div>
						</div>
						<div class="wztj">
							<div>中性：</div>
							<div class="wztjnum2">1</div>
							<div class="wztjnum2">8</div>
							<div class="wztjnum2">0</div>
						</div>
					</div>
				</li>
				<li class="jd-item jd-item4 item999">
					<div class="flow-header">
						<div class="title-box">
							<span class="title">投诉类型统计</span>
						</div>
						<div class="line"></div>
					</div>
					<div class="jdgs-box">
						<div id="chart1" ref="chart1" style="width: 100%; height: 300px"></div>
					</div>
				</li>
				<li class="jd-item jd-item4 item999">
					<div class="flow-header">
						<div class="title-box">
							<span class="title">数据趋势</span>
						</div>
						<div class="line"></div>
					</div>
					<div class="jdgs-box">
						<div id="chart2" ref="chart2" style="width: 100%; height: 300px"></div>
					</div>
				</li>
				<li class="jd-item jd-item1 item999">
					<div class="flow-header">
						<div class="title-box">
							<span class="title">信源占比图</span>
						</div>
						<div class="line"></div>
					</div>
					<div class="jdgs-box">
						<div id="chart16" ref="chart16" style="width: 100%; height: 300px"></div>
					</div>
				</li>
				<li class="jd-item jd-item4 item999">
					<div class="flow-header">
						<div class="title-box">
							<span class="title">投诉地点统计</span>
						</div>
						<div class="line"></div>
					</div>
					<div class="jdgs-box">
						<div id="chart5" ref="chart5" style="width: 100%; height: 300px"></div>
					</div>
				</li>
				<li class="jd-item jd-item2 item999">
					<div class="flow-header">
						<div class="title-box">
							<span class="title">情绪占比图</span>
						</div>
						<div class="line"></div>
					</div>
					<div class="jdgs-box">
						<div id="chart4" ref="chart4" style="width: 100%; height: 300px"></div>
					</div>
				</li>
				<li class="jd-item jd-item2 item999">
					<div class="flow-header">
						<div class="title-box">
							<span class="title">OTA评价</span>
						</div>
						<div class="line"></div>
					</div>
					<div class="jdgs-box">
						<div id="chart7" ref="chart7" style="width: 100%; height: 300px"></div>
					</div>
				</li>
				<li class="jd-item jd-item1 item999">
					<div class="flow-header">
						<div class="title-box">
							<span class="title">正面舆情</span>
						</div>
						<div class="line"></div>
					</div>
					<div class="jdgs-box">
						<div id="chart8" ref="chart8" style="width: 100%; height: 300px"></div>
					</div>
				</li>
			</ul>
		</section>

		<section class="popular-box">
			<div class="m-title">舆情搜索</div>
			<el-input class="zdyInput" v-model="input" placeholder="请输入内容" size="small"></el-input>
			<ul class="popular-content">
				<li class="jd-item jd-item5">
					<div class="flow-header">
						<div class="title-box">
							<span class="title">数据趋势</span>
						</div>
						<div class="line"></div>
					</div>
					<div class="jdgs-box">
						<div id="chart12" ref="chart12" style="width: 100%; height: 300px"></div>
					</div>
				</li>
				<li class="jd-item jd-item5">
					<div class="flow-header">
						<div class="title-box">
							<span class="title">情绪占比图</span>
						</div>
						<div class="line"></div>
					</div>
					<div class="jdgs-box">
						<div id="chart14" ref="chart14" style="width: 100%; height: 300px"></div>
					</div>
				</li>
				<li class="jd-item jd-item5">
					<div class="flow-header">
						<div class="title-box">
							<span class="title">舆情风险指数</span>
						</div>
						<div class="line"></div>
					</div>
					<div id="chart19" ref="chart19" style="width: 100%; height: 300px"></div>
				</li>
				<div style="width: 100%; display: flex; justify-content: space-between">
					<li class="jd-item jd-item6" style="margin-top: 80px">
						<div class="flow-header">
							<div class="title-box">
								<span style="font-size: 24px; font-family: SourceHanSansCN-Bold; font-weight: normal; text-align: left; color: rgb(50, 65, 87)"
									>正面舆情</span
								>
								<span style="margin-left: 20px" class="wztjnum">2</span>
								<span style="margin-left: 20px" class="wztjnum">8</span>
								<span style="margin-left: 20px" class="wztjnum">0</span>
								<span style="margin-left: 20px">条</span>
								<!-- <span style="font-size: 24px; font-family: SourceHanSansCN-Light; font-weight: normal; color: rgb(50, 65, 87); padding-left: 280px">更多></span> -->
								<span
									style="
										font-size: 24px;
										font-family: SourceHanSansCN-Light;
										font-weight: normal;
										color: rgb(50, 65, 87);
										float: right;
										padding-right: 10px;
									"
									>更多></span
								>
							</div>
							<div style="margin-top: 20px">
								<div class="tableBg">
									<div class="namerow">夕阳西下，天边余晖将整片山水染成了一幅壮美的画卷</div>
									<div style="width: 20%">2024-03-10</div>
								</div>
								<div class="tableBg">
									<div class="namerow">湖水波光粼粼，倒映着天空中橙红色的云彩</div>
									<div style="width: 20%">2024-03-10</div>
								</div>
								<div class="tableBg">
									<div class="namerow">山巅的云海翻涌，宛如一幅动态的山水画</div>
									<div style="width: 20%">2024-03-10</div>
								</div>
								<div class="tableBg">
									<div class="namerow">沿着绿荫成荫的小径漫步，微风拂面，让人心情舒畅</div>
									<div style="width: 20%">2024-03-10</div>
								</div>
								<div class="tableBg">
									<div class="namerow">夜幕降临，星空璀璨，恍如银河漫舞</div>
									<div style="width: 20%">2024-03-10</div>
								</div>
								<div class="tableBg">
									<div class="namerow">黄昏时分，渔船归港，海上的余晖映照着渔民的笑脸</div>
									<div style="width: 20%">2024-03-10</div>
								</div>
								<div class="tableBg">
									<div class="namerow">大片的向日葵田，金黄色的花海在阳光下绚烂夺目</div>
									<div style="width: 20%">2024-03-10</div>
								</div>
								<div class="tableBg">
									<div class="namerow">月光静谧流淌，夜色沁冷如水，耳畔仿佛有弥音天籁在徐徐响彻</div>
									<div style="width: 20%">2024-03-10</div>
								</div>
								<div class="tableBg">
									<div class="namerow">这里的风景真美，让我流连忘返</div>
									<div style="width: 20%">2024-03-10</div>
								</div>
								<div class="tableBg">
									<div class="namerow">这里的风景真美，让我流连忘返</div>
									<div style="width: 20%">2024-03-10</div>
								</div>
							</div>
						</div>
					</li>
					<li class="jd-item jd-item6" style="margin-top: 80px">
						<div class="flow-header">
							<div
								class="title-box"
								style="font-size: 24px; font-family: SourceHanSansCN-Bold; font-weight: normal; text-align: left; color: #d5665a"
							>
								<span style="color: #d5665a">负面舆情</span>
								<span style="margin-left: 20px; background-color: #d5665a" class="wztjnum">0</span>
								<span style="margin-left: 20px; background-color: #d5665a" class="wztjnum">0</span>
								<span style="margin-left: 20px; background-color: #d5665a" class="wztjnum">2</span>
								<span style="margin-left: 20px">条</span>
								<span
									style="
										font-size: 24px;
										font-family: SourceHanSansCN-Light;
										font-weight: normal;
										color: rgb(50, 65, 87);
										float: right;
										padding-right: 10px;
									"
									>更多></span
								>
							</div>

							<div style="margin-top: 20px">
								<div class="tableBg">
									<div class="namerow">等待时间过长</div>
									<div style="width: 20%">2024-03-29</div>
								</div>
								<div class="tableBg">
									<div class="namerow">轮渡时间长</div>
									<div style="width: 20%">2024-03-20</div>
								</div>
							</div>
						</div>
					</li>
					<li class="jd-item jd-item6" style="margin-top: 80px">
						<div class="flow-header">
							<div class="title-box">
								<span style="font-size: 24px; font-family: SourceHanSansCN-Bold; font-weight: normal; text-align: left; color: #244a8b"
									>中性舆情</span
								>
								<span style="margin-left: 20px; background-color: #244a8b" class="wztjnum">1</span>
								<span style="margin-left: 20px; background-color: #244a8b" class="wztjnum">8</span>
								<span style="margin-left: 20px; background-color: #244a8b" class="wztjnum">0</span>
								<span style="margin-left: 20px">条</span>
								<span
									style="
										font-size: 24px;
										font-family: SourceHanSansCN-Light;
										font-weight: normal;
										color: rgb(50, 65, 87);
										float: right;
										padding-right: 10px;
									"
									>更多></span
								>
							</div>

							<div style="margin-top: 20px">
								<div class="tableBg">
									<div class="namerow">壮丽景点</div>
									<div style="width: 20%">2024-03-11</div>
								</div>
								<div class="tableBg">
									<div class="namerow">历史悠久</div>
									<div style="width: 20%">2024-03-11</div>
								</div>
								<div class="tableBg">
									<div class="namerow">独具特色</div>
									<div style="width: 20%">2024-03-11</div>
								</div>
								<div class="tableBg">
									<div class="namerow">交通方便</div>
									<div style="width: 20%">2024-03-11</div>
								</div>
								<div class="tableBg">
									<div class="namerow">加持超出预期</div>
									<div style="width: 20%">2024-03-11</div>
								</div>
								<div class="tableBg">
									<div class="namerow">服务周到</div>
									<div style="width: 20%">2024-03-11</div>
								</div>
								<div class="tableBg">
									<div class="namerow">加持超出预期</div>
									<div style="width: 20%">2024-03-11</div>
								</div>
								<div class="tableBg">
									<div class="namerow">整洁有序</div>
									<div style="width: 20%">2024-03-11</div>
								</div>
								<div class="tableBg">
									<div class="namerow">加持超出预期</div>
									<div style="width: 20%">2024-03-11</div>
								</div>
								<div class="tableBg">
									<div class="namerow">服务周到</div>
									<div style="width: 20%">2024-03-11</div>
								</div>
							</div>
						</div>
					</li>
				</div>
			</ul>
		</section>
	</div>
</template>

<script>
import * as echarts from 'echarts';
import navBread3 from '@/components/navBread3.vue';
export default {
	components: {
		navBread3,
	},
	data() {
		return {
			yearList: ['近五年', '近三年', '上一年', '近一年'],
			yearIndex: 0,
			holidayList: ['春节', '元宵节', '清明节', '端午节', '中秋节', '国庆节', '劳动节', '教师节', '元旦'],
			holidayIndex: 0,
			mapTypeList: [
				{ id: 1, name: '热力', img: require('../../assets/img/jc1.png'), img1: require('../../assets/img/jc2.png') },
				{ id: 2, name: '路径', img: require('../../assets/img/jc3.png'), img1: require('../../assets/img/jc4.png') },
				{ id: 3, name: '设备', img: require('../../assets/img/jc5.png'), img1: require('../../assets/img/jc6.png') },
				{ id: 4, name: '设施', img: require('../../assets/img/jc7.png'), img1: require('../../assets/img/jc8.png') },
			],
			activeIndex: 0,
		};
	},

	mounted() {
		this.getChart1();
		this.getChart2();
		this.getChart4();
		this.getChart5();
		this.getChart7();
		this.getChart8();
		this.getChart9();
		this.getChart19();
		this.getChart10();
		this.getChart16();
		this.getChart12();
		this.getChart14();
	},

	methods: {
		handleYear(item, index) {
			this.yearIndex = index;
		},
		handleHoliday(item, index) {
			this.holidayIndex = index;
		},
		handleIndex(item, index) {
			this.activeIndex = index;
		},
		getChart7() {
			const myChart = echarts.init(this.$refs.chart7);
			const option = {
				tooltip: { trigger: 'axis' },
				legend: {
					textStyle: {
						fontSize: 14, //字体大小
						color: '#ffffff', //字体颜色
					},
					data: [''],
				},
				grid: {
					show: false,
					left: '8%',
					top: '10%',
					right: '10%',
					bottom: '10%',
				},
				xAxis: {
					type: 'value',
					splitLine: {
						show: false,
						lineStyle: {
							type: 'dashed',
							color: '#335B7E',
						},
					},
					axisLabel: {
						textStyle: {
							color: '#999999',
						},
					},
					axisLine: {
						show: true,
						// 坐标轴轴线样式设置
						lineStyle: {
							color: '#999999',
						},
					},
				},
				yAxis: [
					{
						name: '',
						type: 'category',
						data: ['小程序', 'APP', '官网', '公众号'],
						axisLabel: {
							//y轴文字的配置
							textStyle: {
								color: '#999999',
							},
						},
						axisLine: {
							show: true,
							// 坐标轴轴线样式设置
							lineStyle: {
								color: '#999999',
							},
						},
					},
				],
				series: [
					{
						name: '',
						type: 'bar',
						itemStyle: {
							normal: {
								color: '#244A8B',
								borderRadius: [8, 8, 8, 8],
							},
						},
						// showBackground: true,
						backgroundStyle: {
							color: '#244A8B',
						},
						barWidth: '20',
						data: [10, 52, 200, 334, 390, 330],
					},
				],
			};
			myChart.setOption(option);
			window.addEventListener('resize', function () {
				myChart.resize();
			});
		},
		getChart8() {
			const myChart = echarts.init(this.$refs.chart8);
			const option = {
				tooltip: {
					show: true,
				},
				toolbox: {
					feature: {
						saveAsImage: {
							iconStyle: {
								normal: {
									color: '#FFFFFF',
								},
							},
						},
					},
				},
				series: [
					{
						// name: '热点分析',
						type: 'wordCloud',
						//size: ['9%', '99%'],
						sizeRange: [6, 66],
						rotationRange: [0, 90],
						rotationStep: 90,
						//textRotation: [0, 45, 90, -45],

						textPadding: 0,

						textStyle: {
							normal: {
								color: function () {
									return 'rgb(' + [Math.round(Math.random() * 160), Math.round(Math.random() * 160), Math.round(Math.random() * 160)].join(',') + ')';
								},
							},
							emphasis: {
								shadowBlur: 10,
								shadowColor: '#333',
							},
						},
						data: [
							{
								name: 'Jayfee',
								value: 666,
							},
							{
								name: 'Nancy',
								value: 520,
							},
						],
					},
				],
			};

			var JosnList = [];

			JosnList.push(
				{
					name: 'Jayfee',
					value: 666,
				},
				{
					name: 'Nancy',
					value: 520,
				},
				{
					name: '生活资源',
					value: '999',
				},
				{
					name: '供热管理',
					value: '888',
				},
				{
					name: '供气质量',
					value: '777',
				},
				{
					name: '生活用水管理',
					value: '688',
				},
				{
					name: '一次供水问题',
					value: '588',
				},
				{
					name: '交通运输',
					value: '516',
				},
				{
					name: '城市交通',
					value: '515',
				},
				{
					name: '环境保护',
					value: '483',
				},
				{
					name: '房地产管理',
					value: '462',
				},
				{
					name: '城乡建设',
					value: '449',
				},
				{
					name: '社会保障与福利',
					value: '429',
				},
				{
					name: '社会保障',
					value: '407',
				},
				{
					name: '文体与教育管理',
					value: '406',
				},
				{
					name: '公共安全',
					value: '406',
				},
				{
					name: '公交运输管理',
					value: '386',
				},
				{
					name: '出租车运营管理',
					value: '385',
				},
				{
					name: '供热管理',
					value: '375',
				},
				{
					name: '市容环卫',
					value: '355',
				},
				{
					name: '自然资源管理',
					value: '355',
				},
				{
					name: '粉尘污染',
					value: '335',
				}
			);

			option.series[0].data = JosnList;

			myChart.setOption(option);
		},
		getChart16() {
			const myChart = echarts.init(this.$refs.chart16);
			const option = {
				title: {
					show: true,
					// text: '年龄分布',
					// subtext: "100%",
					textStyle: {
						fontSize: 18,
						color: '#666666',
						fontWeight: 400,
					},
					subtextStyle: {
						fontSize: 27,
						color: '#0168B7',
						fontWeight: 500,
					},
					textAlign: 'center', //图例文字居中显示
					x: '49%', //距离左边的距离
					y: '60%', //距离上边的距离
				},
				grid: {
					show: false,
					left: '3%',
					top: '0%',
					right: '3%',
					bottom: '0%',
				},
				tooltip: {
					trigger: 'item',
					formatter: '{b} :  {d}%',
				},
				legend: {
					show: false,
					top: '5%',
					left: 'center',
					selectedMode: false,
				},
				color: ['#35FFBF', '#1D89D7', '#35EEFF', '#B074F3'],
				series: [
					{
						// name: '年龄分布',
						type: 'pie',
						radius: ['40%', '70%'],
						center: ['50%', '70%'],
						startAngle: 180,
						label: {
							show: true,
							formatter(param) {
								return param.name + ' ' + param.percent * 2 + '%';
							},
						},

						data: [
							{ value: 1048, name: '小程序' },
							{ value: 735, name: 'app' },
							{ value: 580, name: '官网' },
							{ value: 484, name: '其他' },
							{
								value: 1048 + 735 + 580 + 484,
								itemStyle: {
									// stop the chart from rendering this piece
									color: 'none',
									decal: {
										symbol: 'none',
									},
								},
								label: {
									show: false,
								},
							},
						],
					},
				],
			};

			myChart.setOption(option);
			window.addEventListener('resize', function () {
				myChart.resize();
			});
		},

		getChart1() {
			var chartDom = document.getElementById('chart1');
			var myChart = echarts.init(chartDom);
			var color = ['#D9726B', '#244A8B', '#14BED1', '#886EFF', 'rgb(50, 65, 87)'];
			var legend = ['人身侵权', '服务侵权', '财产侵权', '其他'];
			var seriesData = [
				{ name: '人身侵权', value: 30 },
				{ name: '服务侵权', value: 10 },
				{ name: '财产侵权', value: 15 },
				{ name: '其他', value: 23 },
			];
			var option = {
				color: color,
				grid: {
					top: '15%',
					left: 0,
					right: '1%',
					bottom: 5,
					containLabel: true,
				},
				legend: {
					orient: 'vertical',
					top: 'center',
					right: 50,
					textStyle: {
						align: 'left',
						verticalAlign: 'middle',
						rich: {
							value: {
								color: color,
								fontSize: 10,
							},
							rate: {
								color: 'rgba(255,255,255,0.9)',
								fontSize: 10,
							},
						},
					},
					data: legend,
					formatter: (name) => {
						if (seriesData.length) {
							const item = seriesData.filter((item) => item.name === name)[0];
							return `{name|${name}：}{value| ${item.value}} {rate| ${item.value}%}`;
						}
					},
				},
				series: [
					{
						name: '需求类型占比',
						type: 'pie',
						center: ['50%', '50%'],
						radius: ['45%', '65%'],
						label: {
							normal: {
								show: false,
								position: 'center',
								formatter: '{value|{c}}\n{label|{b}}',
								rich: {
									value: {
										padding: 5,
										align: 'center',
										verticalAlign: 'middle',
										fontSize: 32,
									},
									label: {
										align: 'center',
										verticalAlign: 'middle',
										fontSize: 16,
									},
								},
							},
							emphasis: {
								show: true,
								textStyle: {
									fontSize: '12',
								},
							},
						},
						labelLine: {
							show: false,
							length: 0,
							length2: 0,
						},
						data: seriesData,
					},
				],
			};

			myChart.setOption(option);

			this.getDefaultSelected(myChart);
		},
		getDefaultSelected(myChart) {
			let index = 0;
			myChart.dispatchAction({
				type: 'highlight',
				seriesIndex: 0,
				dataIndex: 0,
			});
			myChart.on('mouseover', (e) => {
				if (e.dataIndex !== index) {
					myChart.dispatchAction({
						type: 'downplay',
						seriesIndex: 0,
						dataIndex: index,
					});
				}
			});
			myChart.on('mouseout', (e) => {
				index = e.dataIndex;
				myChart.dispatchAction({
					type: 'highlight',
					seriesIndex: 0,
					dataIndex: e.dataIndex,
				});
			});
		},
		getChart2() {
			const myChart = echarts.init(this.$refs.chart2);
			const option = {
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'cross',
						label: {
							backgroundColor: '#6a7985',
						},
					},
				},
				// legend: {
				// 	show: true,
				// 	data: ['2017', '2018', '2019'],
				// },

				grid: {
					top: '10%',
					left: '0%',
					right: '4%',
					bottom: '3%',
					containLabel: true,
				},
				xAxis: [
					{
						type: 'category',
						boundaryGap: false,
						axisLabel: {
							textStyle: {
								color: '#999999',
							},
						},
						axisLine: {
							show: true,
							// 坐标轴轴线样式设置
							lineStyle: {
								color: '#999999',
							},
						},
						data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
					},
				],
				yAxis: [
					{
						type: 'value',
						splitLine: {
							show: true,
							lineStyle: {
								type: 'dashed',
								color: '#E5E5E5',
							},
						},
						axisLabel: {
							textStyle: {
								color: '#999999',
							},
						},
						axisLine: {
							show: true,
							// 坐标轴轴线样式设置
							lineStyle: {
								color: '#999999',
							},
						},
					},
				],
				series: [
					{
						name: '2017',
						type: 'line',
						// smooth: true,
						itemStyle: {
							normal: {
								color: '#079AAE',
							},
						},

						data: [ 200, 1204, 390],
					},

					{
						name: '2018',
						type: 'line',
						// smooth: true,
						itemStyle: {
							normal: {
								color: '#D9726B',
							},
						},
						data: [ 234, 1340, 130],
					},
				],
			};
			myChart.setOption(option);
			window.addEventListener('resize', function () {
				myChart.resize();
			});
		},

		getChart12() {
			const myChart = echarts.init(this.$refs.chart12);
			const option = {
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'cross',
						label: {
							backgroundColor: '#6a7985',
						},
					},
				},
				// legend: {
				// 	show: true,
				// 	data: ['2017', '2018', '2019'],
				// },

				grid: {
					top: '10%',
					left: '0%',
					right: '4%',
					bottom: '3%',
					containLabel: true,
				},
				xAxis: [
					{
						type: 'category',
						boundaryGap: false,
						axisLabel: {
							textStyle: {
								color: '#999999',
							},
						},
						axisLine: {
							show: true,
							// 坐标轴轴线样式设置
							lineStyle: {
								color: '#999999',
							},
						},
						data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
					},
				],
				yAxis: [
					{
						type: 'value',
						splitLine: {
							show: true,
							lineStyle: {
								type: 'dashed',
								color: '#E5E5E5',
							},
						},
						axisLabel: {
							textStyle: {
								color: '#999999',
							},
						},
						axisLine: {
							show: true,
							// 坐标轴轴线样式设置
							lineStyle: {
								color: '#999999',
							},
						},
					},
				],
				series: [
					{
						name: '2017',
						type: 'line',
						// smooth: true,
						itemStyle: {
							normal: {
								color: '#079AAE',
							},
						},

						data: [200, 334, 330],
					},

					{
						name: '2018',
						type: 'line',
						// smooth: true,
						itemStyle: {
							normal: {
								color: '#D9726B',
							},
						},
						data: [ 260, 234, 130],
					},
				],
			};
			myChart.setOption(option);
			window.addEventListener('resize', function () {
				myChart.resize();
			});
		},
		getChart5() {
			const myChart = echarts.init(this.$refs.chart5);
			const option = {
				tooltip: { trigger: 'axis' },
				legend: {
					show: false,
					textStyle: {
						fontSize: 14, //字体大小
						color: '#ffffff', //字体颜色
					},
				},
				grid: {
					show: false,
					left: '3%',
					top: '15%',
					right: '5%',
					bottom: '6%',
				},
				xAxis: {
					data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
					axisLabel: {
						textStyle: {
							color: '#666666',
						},
					},
					axisLine: {
						show: true,
						// 坐标轴轴线样式设置
						lineStyle: {
							color: '#E5E5E5',
						},
					},
				},
				yAxis: [
					{
						name: '万/人次',
						type: 'value',
						splitLine: {
							show: true,
							lineStyle: {
								type: 'dashed',
								color: '#E5E5E5',
							},
						},
						axisLabel: {
							//y轴文字的配置
							textStyle: {
								color: '#666666',
							},
						},
						axisLine: {
							show: true,
							// 坐标轴轴线样式设置
							lineStyle: {
								color: '#E5E5E5',
							},
						},
					},
				],
				series: [
					{
						name: '',
						type: 'bar',
						itemStyle: {
							normal: {
								color: 'rgb(50, 65, 87)',
							},
						},
						barWidth: '24',
						data: [200, 334, 190],
					},

					{
						name: '',
						type: 'line',
						yAxisIndex: 0,
						itemStyle: {
							normal: {
								color: '#244A8B', //改变折线点的颜色
								lineStyle: {
									color: '#244A8B', //改变折线颜色
								},
							},
						},
						tooltip: {
							valueFormatter: function (value) {
								return value + ' °C';
							},
						},
						data: [3.3, 4.5, 1.3],
					},
				],
			};
			myChart.setOption(option);
			window.addEventListener('resize', function () {
				myChart.resize();
			});
		},
		getChart4() {
			const myChart = echarts.init(this.$refs.chart4);
			const option = {
				title: {
					show: true,
					// text: '125',
					// subtext: '万人次',
					textStyle: {
						fontSize: 27,
						color: '#666666',
						fontWeight: 400,
					},
					subtextStyle: {
						fontSize: 18,
						color: '#666666',
						fontWeight: 500,
					},
					textAlign: 'center', //图例文字居中显示
					x: '49%', //距离左边的距离
					y: '41%', //距离上边的距离
				},

				tooltip: {
					trigger: 'item',
					formatter: '{b} :  {d}%',
				},
				color: ['#5E5CBA', '#FEAD54', '#5DE2C1', 'rgb(50, 65, 87)', '#5E5CBA'],
				series: [
					{
						type: 'pie',
						radius: ['40%', '55%'],
						avoidLabelOverlap: true,
						label: {
							normal: {
								show: true,
								color: '#666666',
								formatter: '{b} \n  {d}%', // 显示百分比，
							},
							emphasis: {
								show: true,
							},
						},
						labelLine: {
							normal: {
								show: true,
								length: 10,
								length2: 10,
							},
						},
						tooltip: {
							formatter(params) {
								return params.name + '  ' + params.value + '  ' + params.percent + '%';
							},
						},
						data: [
							{ value: 22, name: '正面' },
							{ value: 25, name: '中性' },
							{ value: 30, name: '负面' },
						],
					},
				],
			};
			myChart.setOption(option);
			window.addEventListener('resize', function () {
				myChart.resize();
			});
		},

		getChart14() {
			const myChart = echarts.init(this.$refs.chart14);
			const option = {
				title: {
					show: true,
					// text: '125',
					// subtext: '万人次',
					textStyle: {
						fontSize: 27,
						color: '#666666',
						fontWeight: 400,
					},
					subtextStyle: {
						fontSize: 18,
						color: '#666666',
						fontWeight: 500,
					},
					textAlign: 'center', //图例文字居中显示
					x: '49%', //距离左边的距离
					y: '41%', //距离上边的距离
				},

				tooltip: {
					trigger: 'item',
					formatter: '{b} :  {d}%',
				},
				color: ['#5E5CBA', '#FEAD54', '#5DE2C1', 'rgb(50, 65, 87)', '#5E5CBA'],
				series: [
					{
						type: 'pie',
						radius: ['40%', '55%'],
						avoidLabelOverlap: true,
						label: {
							normal: {
								show: true,
								color: '#666666',
								formatter: '{b} \n  {d}%', // 显示百分比，
							},
							emphasis: {
								show: true,
							},
						},
						labelLine: {
							normal: {
								show: true,
								length: 10,
								length2: 10,
							},
						},
						tooltip: {
							formatter(params) {
								return params.name + '  ' + params.value + '  ' + params.percent + '%';
							},
						},
						data: [
							{ value: 22, name: '正面' },
							{ value: 25, name: '中性' },
							{ value: 30, name: '负面' },
						],
					},
				],
			};
			myChart.setOption(option);
			window.addEventListener('resize', function () {
				myChart.resize();
			});
		},
		getChart9() {
			const myChart = echarts.init(this.$refs.chart9);
			var dataArr = 84;
			var colorSet = {
				color: '#468EFD',
			};
			var option = {
				tooltip: {
					formatter: '{a} <br/>{b} : {c}%',
				},

				series: [
					{
						name: '内部进度条',
						type: 'gauge',
						// center: ['20%', '50%'],
						radius: '70%',

						splitNumber: 10,
						axisLine: {
							lineStyle: {
								color: [
									[dataArr / 100, colorSet.color],
									[1, '#111F42'],
								],
								width: 8,
							},
						},
						axisLabel: {
							show: false,
						},
						axisTick: {
							show: false,
						},
						splitLine: {
							show: false,
						},
						itemStyle: {
							show: false,
						},
						detail: {
							formatter: function (value) {
								if (value !== 0) {
									var num = Math.round(value);
									return parseInt(num).toFixed(0) + '%';
								} else {
									return 0;
								}
							},
							offsetCenter: [0, 82],
							textStyle: {
								padding: [0, 0, 0, 0],
								fontSize: 18,
								fontWeight: '700',
								color: colorSet.color,
							},
						},
						title: {
							//标题
							show: true,
							offsetCenter: [0, 46], // x, y，单位px
							textStyle: {
								color: '#0164DE',
								fontSize: 14, //表盘上的标题文字大小
								fontWeight: 400,
								fontFamily: 'PingFangSC',
							},
						},
						data: [
							{
								name: '正面：',
								value: dataArr,
							},
						],
						pointer: {
							show: true,
							length: '55%',
							radius: '20%',
							width: 8, //指针粗细
						},
						animationDuration: 4000,
					},
					{
						name: '外部刻度',
						type: 'gauge',
						//  center: ['20%', '50%'],
						radius: '100%',
						min: 0, //最小刻度
						max: 100, //最大刻度
						splitNumber: 10, //刻度数量
						startAngle: 225,
						endAngle: -45,
						axisLine: {
							show: true,
							lineStyle: {
								width: 1,
								color: [[1, 'rgba(0,0,0,0)']],
							},
						}, //仪表盘轴线
						axisLabel: {
							show: true,
							color: '#4d5bd1',
							distance: 25,
							formatter: function (v) {
								switch (v + '') {
									case '0':
										return '0';
									case '10':
										return '10';
									case '20':
										return '20';
									case '30':
										return '30';
									case '40':
										return '40';
									case '50':
										return '50';
									case '60':
										return '60';
									case '70':
										return '70';
									case '80':
										return '80';
									case '90':
										return '90';
									case '100':
										return '100';
								}
							},
						}, //刻度标签。
						axisTick: {
							show: true,
							splitNumber: 7,
							lineStyle: {
								color: colorSet.color, //用颜色渐变函数不起作用
								width: 1,
							},
							length: -8,
						}, //刻度样式
						splitLine: {
							show: true,
							length: -20,
							lineStyle: {
								color: colorSet.color, //用颜色渐变函数不起作用
							},
						}, //分隔线样式
						detail: {
							show: false,
						},
						pointer: {
							show: false,
						},
					},
				],
			};
			myChart.setOption(option);
			window.addEventListener('resize', function () {
				myChart.resize();
			});
		},

		getChart19() {
			const myChart = echarts.init(this.$refs.chart19);
			var dataArr = 84;
			var colorSet = {
				color: '#468EFD',
			};
			var option = {
				tooltip: {
					formatter: '{a} <br/>{b} : {c}%',
				},

				series: [
					{
						name: '内部进度条',
						type: 'gauge',
						// center: ['20%', '50%'],
						radius: '70%',

						splitNumber: 10,
						axisLine: {
							lineStyle: {
								color: [
									[dataArr / 100, colorSet.color],
									[1, '#111F42'],
								],
								width: 8,
							},
						},
						axisLabel: {
							show: false,
						},
						axisTick: {
							show: false,
						},
						splitLine: {
							show: false,
						},
						itemStyle: {
							show: false,
						},
						detail: {
							formatter: function (value) {
								if (value !== 0) {
									var num = Math.round(value);
									return parseInt(num).toFixed(0) + '%';
								} else {
									return 0;
								}
							},
							offsetCenter: [0, 82],
							textStyle: {
								padding: [0, 0, 0, 0],
								fontSize: 18,
								fontWeight: '700',
								color: colorSet.color,
							},
						},
						title: {
							//标题
							show: true,
							offsetCenter: [0, 46], // x, y，单位px
							textStyle: {
								color: '#0164DE',
								fontSize: 14, //表盘上的标题文字大小
								fontWeight: 400,
								fontFamily: 'PingFangSC',
							},
						},
						data: [
							{
								name: '正面：',
								value: dataArr,
							},
						],
						pointer: {
							show: true,
							length: '55%',
							radius: '20%',
							width: 8, //指针粗细
						},
						animationDuration: 4000,
					},
					{
						name: '外部刻度',
						type: 'gauge',
						//  center: ['20%', '50%'],
						radius: '100%',
						min: 0, //最小刻度
						max: 100, //最大刻度
						splitNumber: 10, //刻度数量
						startAngle: 225,
						endAngle: -45,
						axisLine: {
							show: true,
							lineStyle: {
								width: 1,
								color: [[1, 'rgba(0,0,0,0)']],
							},
						}, //仪表盘轴线
						axisLabel: {
							show: true,
							color: '#4d5bd1',
							distance: 25,
							formatter: function (v) {
								switch (v + '') {
									case '0':
										return '0';
									case '10':
										return '10';
									case '20':
										return '20';
									case '30':
										return '30';
									case '40':
										return '40';
									case '50':
										return '50';
									case '60':
										return '60';
									case '70':
										return '70';
									case '80':
										return '80';
									case '90':
										return '90';
									case '100':
										return '100';
								}
							},
						}, //刻度标签。
						axisTick: {
							show: true,
							splitNumber: 7,
							lineStyle: {
								color: colorSet.color, //用颜色渐变函数不起作用
								width: 1,
							},
							length: -8,
						}, //刻度样式
						splitLine: {
							show: true,
							length: -20,
							lineStyle: {
								color: colorSet.color, //用颜色渐变函数不起作用
							},
						}, //分隔线样式
						detail: {
							show: false,
						},
						pointer: {
							show: false,
						},
					},
				],
			};
			myChart.setOption(option);
			window.addEventListener('resize', function () {
				myChart.resize();
			});
		},
		getChart10() {
			const myChart = echarts.init(this.$refs.chart10);
			var dataArr = 16;
			var colorSet = {
				color: '#468EFD',
			};
			var option = {
				tooltip: {
					formatter: '{a} <br/>{b} : {c}%',
				},

				series: [
					{
						name: '内部进度条',
						type: 'gauge',
						// center: ['20%', '50%'],
						radius: '70%',

						splitNumber: 10,
						axisLine: {
							lineStyle: {
								color: [
									[dataArr / 100, colorSet.color],
									[1, '#111F42'],
								],
								width: 8,
							},
						},
						axisLabel: {
							show: false,
						},
						axisTick: {
							show: false,
						},
						splitLine: {
							show: false,
						},
						itemStyle: {
							show: false,
						},
						detail: {
							formatter: function (value) {
								if (value !== 0) {
									var num = Math.round(value);
									return parseInt(num).toFixed(0) + '%';
								} else {
									return 0;
								}
							},
							offsetCenter: [0, 82],
							textStyle: {
								padding: [0, 0, 0, 0],
								fontSize: 18,
								fontWeight: '700',
								color: colorSet.color,
							},
						},
						title: {
							//标题
							show: true,
							offsetCenter: [0, 46], // x, y，单位px
							textStyle: {
								color: '#0164DE',
								fontSize: 14, //表盘上的标题文字大小
								fontWeight: 400,
								fontFamily: 'PingFangSC',
							},
						},
						data: [
							{
								name: '负面：',
								value: dataArr,
							},
						],
						pointer: {
							show: true,
							length: '55%',
							radius: '20%',
							width: 8, //指针粗细
						},
						animationDuration: 4000,
					},
					{
						name: '外部刻度',
						type: 'gauge',
						//  center: ['20%', '50%'],
						radius: '100%',
						min: 0, //最小刻度
						max: 100, //最大刻度
						splitNumber: 10, //刻度数量
						startAngle: 225,
						endAngle: -45,
						axisLine: {
							show: true,
							lineStyle: {
								width: 1,
								color: [[1, 'rgba(0,0,0,0)']],
							},
						}, //仪表盘轴线
						axisLabel: {
							show: true,
							color: '#4d5bd1',
							distance: 25,
							formatter: function (v) {
								switch (v + '') {
									case '0':
										return '0';
									case '10':
										return '10';
									case '20':
										return '20';
									case '30':
										return '30';
									case '40':
										return '40';
									case '50':
										return '50';
									case '60':
										return '60';
									case '70':
										return '70';
									case '80':
										return '80';
									case '90':
										return '90';
									case '100':
										return '100';
								}
							},
						}, //刻度标签。
						axisTick: {
							show: true,
							splitNumber: 7,
							lineStyle: {
								color: colorSet.color, //用颜色渐变函数不起作用
								width: 1,
							},
							length: -8,
						}, //刻度样式
						splitLine: {
							show: true,
							length: -20,
							lineStyle: {
								color: colorSet.color, //用颜色渐变函数不起作用
							},
						}, //分隔线样式
						detail: {
							show: false,
						},
						pointer: {
							show: false,
						},
					},
				],
			};
			myChart.setOption(option);
			window.addEventListener('resize', function () {
				myChart.resize();
			});
		},
	},
};
</script>

<style lang="scss" scoped>
.monitoring-box {
	padding: 20px 24px 40px 24px;
	background: #f8f8ff;

	.search-box {
		margin-top: 25px;
		height: 280px;
		background: #ffffff;
		border-radius: 40px;
		box-shadow: 0.16px 3px 16px 0px rgba(27, 98, 140, 0.1);
		padding: 10px 20px;

		.slider-box {
			margin-top: 25px;
			text-align: center;
		}
		.slider-box img {
			width: 100%;
		}
		.sjd-box {
			margin-top: 45px;
			display: flex;
			align-items: center;
			padding: 0 15px;

			.title {
				display: flex;
				align-items: center;
				font-size: 18px;
				font-family: MicrosoftYaHei;
				font-weight: normal;
				text-align: left;
				color: #333333;
			}

			.sjd {
				flex: 1;
				min-width: 0;
				text-align: left;
				.sjdwz {
					padding: 0 25px;
					font-size: 18px;
					font-family: MicrosoftYaHei;
					font-weight: normal;
					color: #333333;
					cursor: pointer;
					user-select: none;
				}
				.active {
					color: #d5665a;
				}
			}
		}
	}

	.heat-map-box {
		margin-top: 25px;
		display: flex;
		justify-content: space-between;
		.left1 {
			flex: 1;
			min-width: 0;
			height: 584px;
			background: #ffffff;
			border-radius: 40px;
			box-shadow: 0.16px 3px 16px 0px rgba(27, 98, 140, 0.1);
			padding: 10px 20px;
			position: relative;

			.mapimg {
				width: 100%;
				height: calc(100% - 30px);
			}

			.map-type {
				position: absolute;
				left: 20px;
				top: 80px;
				background: #ffffff;
				border: 1px solid rgb(50, 65, 87);
				box-shadow: 0px 4px 8px 0px rgba(8, 155, 171, 0.2);
				display: flex;
				border-radius: 20px;
				overflow: hidden;

				.map-type-btn {
					width: 136px;
					height: 40px;
					display: flex;
					align-items: center;
					justify-content: center;
					cursor: pointer;

					span {
						padding-left: 9px;
						font-size: 18px;
						font-family: SourceHanSansCN;
						font-weight: normal;
						text-align: left;
						color: rgb(50, 65, 87);
					}
				}
				.active {
					background: rgb(50, 65, 87);
					span {
						color: #fff;
					}
				}
			}
		}
		.right1 {
			margin-left: 25px;
			width: 508px;
			height: 584px;
			background: #ffffff;
			border-radius: 40px;
			box-shadow: 0.16px 3px 16px 0px rgba(27, 98, 140, 0.1);
			padding: 40px 20px;

			.jdry-box {
				width: 100%;
				height: 120px;
				background: #f8f8ff;
				border-radius: 40px;
				display: flex;
				justify-content: space-between;
				padding: 20px 30px 20px 40px;

				.title {
					font-size: 24px;
					font-family: SourceHanSansCN;
					font-weight: bold;
					color: #244a8b;
					text-align: left;
				}
				.title2 {
					font-size: 24px;
					font-family: SourceHanSansCN;
					font-weight: bold;
					color: #d9726b;
					text-align: left;
				}
				.num2 {
					padding: 5px 12px;
					background: #d9726b;
					border-radius: 13px;
					font-size: 30px;
					font-family: SourceHanSansCN;
					font-weight: bold;
					text-align: center;
					color: #ffffff;
					margin-right: 20px;
				}
				.num {
					padding: 5px 12px;
					background: #244a8b;
					border-radius: 13px;
					font-size: 30px;
					font-family: SourceHanSansCN;
					font-weight: bold;
					text-align: center;
					color: #ffffff;
					margin-right: 20px;
				}

				.unit {
					font-size: 14px;
					font-family: SourceHanSansCN;
					font-weight: normal;
					text-align: left;
					color: #333333;
				}
			}
		}
	}

	.reception-box {
		margin-top: 25px;
		height: 660px;
		background: #ffffff;
		border-radius: 40px;
		box-shadow: 0.16px 3px 16px 0px rgba(27, 98, 140, 0.1);
		padding: 10px 20px;

		.reception-content {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: calc(100% - 30px);
			.left3 {
				flex: 1;
				min-width: 0;
				height: 100%;

				.chart1 {
					width: 100%;
					height: 320px;
				}

				.snxr-box {
					width: 100%;
					height: calc(100% - 350px);
					display: flex;
					justify-content: space-between;
					margin-top: 25px;

					.item-box {
						flex: 1;
						.chart2 {
							width: 100%;
							height: 90%;
						}
					}
				}
			}
			.right3 {
				margin-right: 30px;
				width: 482px;
				height: 517px;
				background: url('../../assets/img/ljjdbg.png') no-repeat;
				background-size: 100% 100%;
				padding: 40px 30px;

				.item-box {
					display: flex;
					align-items: center;
					margin-bottom: 45px;
				}

				.title {
					font-size: 24px;
					font-family: SourceHanSansCN;
					font-weight: normal;
					text-align: left;
					color: #333333;
				}
				.name {
					margin-left: 16px;
					font-size: 30px;
					font-family: MicrosoftYaHei;
					font-weight: normal;
					text-align: left;
					color: #244a8b;
				}
			}
		}
	}

	.popular-box {
		margin-top: 25px;
		height: 1100px;
		background: #ffffff;
		border-radius: 40px;
		box-shadow: 0.16px 3px 16px 0px rgba(27, 98, 140, 0.1);
		padding: 10px 20px;

		.popular-content {
			width: 100%;
			/* height: calc(100% - 30px); */
			display: flex;
			flex-wrap: wrap;
			padding-top: 25px;

			.jd-item {
				.chart6 {
					width: 100%;
					height: 90%;
				}

				.jdgs-box {
					padding-top: 20px;
					/* height: calc(100% - 30px); */
				}
			}
			.item999 {
				border-bottom: 4px solid #d7e6e5;
				border-right: 4px solid #d7e6e5;
				padding: 10px;
			}
			.item999:nth-child(3n) {
				border-right: none;
			}
			.item999:nth-child(8) {
				border-right: none;
			}

			.item999:nth-child(7) {
				border-bottom: none;
			}
			.item999:nth-child(8) {
				border-bottom: none;
			}
			.item999:nth-child(9) {
				border-bottom: none;
			}
			.item999:nth-child(10) {
				border-bottom: none;
			}
			.item999:nth-child(9) {
				border-right: 4px solid #d7e6e5;
			}
			.item999:last-child {
				border-right: none;
			}
			.jd-item1 {
				width: 420px;
			}

			.jd-item2 {
				width: 18.5%;
			}

			.jd-item3 {
				width: 520px;
			}
			.jd-item4 {
				width: 37%;
			}
			.jd-item5 {
				width: 33%;
			}

			.jd-item6 {
				width: 32%;
			}
		}
	}

	.route-box {
		margin-top: 25px;
		height: 546px;
		background: #ffffff;
		border-radius: 40px;
		box-shadow: 0.16px 3px 16px 0px rgba(27, 98, 140, 0.1);
		padding: 10px 20px;

		.route-content {
			height: calc(100% - 30px);
			display: flex;
			justify-content: space-between;
			align-items: center;
			.route-item {
				padding-top: 20px;
				height: 100%;
			}
			.route1 {
				flex: 1;
				min-width: 0;
				.chart8 {
					width: 100%;
					height: 90%;
				}
			}
			.route2 {
				width: 700px;

				.xllc-box {
					margin-top: 30px;
					width: calc(100% - 25px);
					height: 376px;
					background: rgba(8, 155, 171, 0.05);
					border-radius: 4px;
					position: relative;

					.lcimg {
						position: absolute;
						left: 80px;
						top: 44px;
					}

					.xl-item {
						position: absolute;
						z-index: 55;
						display: flex;
						height: 103px;

						.time {
							padding-top: 45px;
							font-size: 24px;
							font-family: PingFang-SC-Medium;
							font-weight: normal;
							text-align: left;
							color: #fead54;
						}
						.name {
							font-size: 24px;
							font-family: AdobeHeitiStd;
							font-weight: normal;
							text-align: left;
							color: #333333;
							line-height: 32px;
						}
					}
				}
			}
			.route3 {
				margin-right: 30px;
				width: 462px;
				height: 426px;
				background: url('../../assets/img/r3bg.png') no-repeat;
				background-size: 100% 100%;
				padding: 66px 40px;

				.ljgl-item {
					display: flex;
					align-items: center;
					margin-bottom: 40px;
					.title {
						width: 50%;
						font-size: 24px;
						font-family: SourceHanSansCN;
						font-weight: normal;
						text-align: center;
						color: #333333;
					}
					.num {
						font-size: 30px;
						font-family: MicrosoftYaHei;
						font-weight: normal;
						text-align: left;
						color: #244a8b;
					}
				}
			}
		}
	}

	.complaint-box {
		margin-top: 25px;
		display: flex;
		justify-content: space-between;
		.left2 {
			width: calc((100% - 25px) / 2);
			height: 360px;
			background: #ffffff;
			border-radius: 40px;
			box-shadow: 0.16px 3px 16px 0px rgba(27, 98, 140, 0.1);
			padding: 10px 20px;

			.left-content {
				height: calc(100% - 30px);
				display: flex;
				justify-content: space-between;
				padding-top: 20px;

				.left4 {
					flex: 1;
					min-width: 0;

					.left4-item {
						display: flex;
						width: 100%;
						height: calc((100% - 25px) / 2);
						align-items: center;

						.chart9 {
							width: 160px;
							height: 100%;
						}

						.l4-text {
							flex: 1;
							min-width: 0;
							text-align: left;

							.l4-p {
								.title {
									font-size: 16px;
									font-family: STXihei, STXihei-Regular;
									font-weight: 400;
									text-align: left;
									color: #333333;
								}
								.num {
									margin-left: 30px;
									font-size: 24px;
									font-family: youshe;
									font-weight: normal;
									text-align: left;
									color: rgb(50, 65, 87);
								}
								.num2 {
									color: #ff7d4a;
								}
								.unit {
									font-size: 12px;
									font-family: PingFang-SC-Regular;
									font-weight: normal;
									text-align: left;
									color: #666666;
								}
							}
						}
					}
				}
				.right4 {
					width: 392px;

					.ts-table {
						margin-top: 25px;
						// border: 1px solid #000000;
						border-collapse: collapse;
					}
					.head-tr {
						background: rgba(8, 155, 171, 0.3);
						border-radius: 4px;
						font-size: 16px;
						font-family: PingFang-SC-Medium;
						font-weight: normal;
						color: #006e7a;
						margin-bottom: 2px;
					}
					th {
						padding: 10px 12px;
						text-align: left;
						// border: 1px solid #000000;
					}

					.tslx {
						font-size: 16px;
						font-family: SourceHanSansCN;
						font-weight: normal;
						color: #ff7d4a;
						display: flex;
						align-items: center;

						img {
							margin-right: 10px;
						}
					}

					.tslx2 {
						color: #00b6ca;
					}

					.con-tr {
						background: rgba(8, 155, 171, 0.1);
						border: 2px solid #fff;
					}

					td {
						text-align: left;
						padding: 10px 12px;
						font-size: 16px;
						font-family: PingFang-SC-Regular;
						font-weight: normal;
						color: #333333;
					}
				}
			}
		}
		.right2 {
			width: calc((100% - 25px) / 2);
			height: 360px;
			background: #ffffff;
			border-radius: 40px;
			box-shadow: 0.16px 3px 16px 0px rgba(27, 98, 140, 0.1);
			padding: 10px 20px;

			.yq-content {
				padding-top: 20px;
				width: 100%;
				height: calc(100% - 30px);
				display: flex;
				justify-content: space-between;

				.yq-left {
					width: 50%;
					height: 100%;

					.yqtb-box {
						margin-top: 16px;
						display: flex;
						align-items: center;
						height: 85%;

						.chart11 {
							width: 100%;
							height: 150px;
						}

						.title {
							font-size: 16px;
							font-family: PingFang-SC-Regular;
							font-weight: normal;
							color: #666666;
						}
					}
				}
				.yq-right {
					width: 50%;
					height: 100%;

					.tsqk-box {
						margin-top: 16px;
						height: 85%;
						background: #f8f8ff;
						border-radius: 10px;
					}
				}
			}
		}
	}
}

.m-title {
	font-size: 20px;
	font-family: SourceHanSansCN;
	font-weight: normal;
	text-align: left;
	color: rgb(50, 65, 87);
}

.flow-header {
	position: relative;

	.title-box {
		text-align: left;
	}

	.title {
		font-size: 16px;
		font-family: MicrosoftYaHei;
		font-weight: normal;
		text-align: left;
		color: rgb(50, 65, 87);
		padding-bottom: 8px;
		border-bottom: 1px solid rgb(50, 65, 87);
	}

	.line {
		width: 167px;
		height: 1px;
		position: relative;
	}
	.line::before {
		content: '';
		position: absolute;
		left: 0;
		top: 4px;
		width: 17px;
		height: 4px;
		background: rgb(50, 65, 87);
	}
}

.jdgs-item-box {
	display: flex;
	align-items: center;
	margin-bottom: 45px;
}

.jdgs-title {
	font-size: 24px;
	font-family: SourceHanSansCN;
	font-weight: normal;
	text-align: left;
	color: #333333;
}
.jdgs-name {
	margin-left: 10px;
	font-size: 30px;
	font-family: MicrosoftYaHei;
	font-weight: normal;
	text-align: left;
	color: #244a8b;
}
.tstj {
	width: 30%;
	height: 76px;
	opacity: 0.61;
	background: rgb(50, 65, 87);
	font-size: 15px;
	font-family: SourceHanSansCN-Normal;
	font-weight: normal;
	line-height: 76px;
	color: #ffffff;
	margin-right: 8px;
}
.tstj1 {
	width: 30%;
	height: 131px;
	background: #c2f3f3;
	line-height: 131px;
	margin-right: 8px;
	font-size: 29px;
	font-family: SourceHanSansCN-Bold;
	font-weight: normal;
}
.wztj {
	margin: 30px 24px;
	display: flex;
	align-items: center;
	justify-content: space-around;
}
.wztjnum {
	color: #ffffff;
	font-size: 20px;
	padding: 10px;
	background-color: rgb(50, 65, 87);
	border-radius: 4px;
}
.wztjnum1 {
	color: #ffffff;
	font-size: 20px;
	padding: 10px;
	background-color: #d9726b;
	border-radius: 4px;
}
.wztjnum2 {
	color: #ffffff;
	font-size: 20px;
	padding: 10px;
	background-color: #244a8b;
	border-radius: 4px;
}
.zdyInput {
	text-align: left;
	margin: 50px 20px;
}
.tableBg {
	height: 40px;
	background: #f2fafb;
	border-radius: 4px;
	color: #666666;
	display: flex;
	align-items: center;
}
.namerow {
	width: 80%;
	text-align: left;
	padding: 0 20px;
}
</style>
<style>
.zdyInput .el-input__inner {
	width: 761px;
	height: 40px;
	border: 1px solid rgb(50, 65, 87);
	border-radius: 21px;
}
</style>
